<template>
  <page-meta :page-style="$theme.pageStyle">
    <!-- #ifndef H5 -->
    <navigation-bar
        :front-color="$theme.navColor"
        :background-color="$theme.navBgColor"
    />
    <!-- #endif -->
  </page-meta>
  <view class="index" :style="pageStyle">
    <page-bg></page-bg>

    <!--顶部-->
    <u-navbar
        :safeAreaInsetTop="false"
        :placeholder="false"
        :class="{ 'fixed top-0 z-10': isLargeScreen }"
        :is-back="false"
        :is-fixed="true"
          :title="$theme.title"
        :border-bottom="false"
        :title-bold="true"
        :title-color="'#111111'"
        :background="{ background : navBg }"
    >
      <template #default>
        <navigator
            url="/pages/search/search"
            class="page-address"
            hover-class="none"
        >
          <u-icon class="address-icon" name="map"></u-icon>
          <view class="address-text">昆明市呈贡区</view>
        </navigator>
      </template>
    </u-navbar>

    <!-- 组件 -->
    <template
        v-for="(item, index) in state.pages"
        :key="index"
    >
      <view v-if="false">
        <template v-if="item.name == 'search'">
          <w-search
              :pageMeta="state.meta"
              :content="item.content"
              :styles="item.styles"
              :percent="percent"
              :isLargeScreen="isLargeScreen"
          />
        </template>
      </view>
      <template v-if="item.name == 'banner'">
        <w-banner
            :content="item.content"
            :styles="item.styles"
            :isLargeScreen="isLargeScreen"
            @change="handleBanner"
        />
      </template>
      <template v-if="item.name == 'nav'">
        <w-nav :content="item.content" :styles="item.styles"/>
      </template>
      <template v-if="item.name == 'nav'">
        <w-porcelain :content="item.content" :styles="item.styles"/>
      </template>
      <template v-if="item.name == 'middle-banner'">
        <w-middle-banner :content="item.content" :styles="item.styles"/>
      </template>
    </template>

    <view class="px-[30rpx]">
      <tabs
          :current="navCurrent"
          @change="navChange"
          bar-width="60"
          :isScroll="false"
          :activeColor="'#111'"
          :bgColor="'transparent'"
          :stickyBgColor="'transparent'"
          :fontSize="36"
          :bold="true"
          :inactiveColor="'#888'"
          :barStyle="{
          bottom: '-8rpx',
          height: '8rpx',
          borderRadius: '8rpx',
          backgroundColor: 'transparent',
          backgroundImage: 'linear-gradient(to right, var(--color-primary), var(--color-minor))'
        }"
      >
        <tab v-for="(item, i) in navList" :key="i" :name="item.name"></tab>
      </tabs>
      <view class="mt-3">
        <w-blind-date-item v-for="(item,index) in userListObj.lists" :dataInfo="item" :key="index"></w-blind-date-item>
      </view>
      <view class="py-[30rpx]">
        <u-loadmore :status="loadMore" />
      </view>
    </view>

    <view v-if="false">
      <view class="article" v-if="state.article.length">
        <view
            class="flex items-center article-title mx-[20rpx] my-[30rpx] text-lg font-medium"
        >
          最新资讯
        </view>
        <news-card
            v-for="item in state.article"
            :key="item.id"
            :news-id="item.id"
            :item="item"
        />
      </view>
    </view>

    <!-- 返回顶部按钮 -->
    <u-back-top
        :scroll-top="scrollTop"
        :top="100"
        :customStyle="{
                backgroundColor: '#FFF',
                color: '#000',
                boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.1)'
            }"
    >
    </u-back-top>

    <!--  #ifdef MP  -->
    <!--  微信小程序隐私弹窗  -->
    <MpPrivacyPopup></MpPrivacyPopup>
    <!--  #endif  -->

    <tabbar/>
  </view>
</template>

<script setup lang="ts">
import {getIndex} from '@/api/shop'
import {onLoad,onReachBottom, onPageScroll} from "@dcloudio/uni-app";
import {computed, reactive, ref} from 'vue'
import {useAppStore} from "@/stores/app";
import {getGuestsList} from "@/api/new";


// #ifdef MP
import MpPrivacyPopup from './component/mp-privacy-popup.vue'
import NewsList from "@/pages/news/component/news-list.vue";
// #endif

let loadMore = ref('loading')

const appStore = useAppStore()


const state = reactive<{
  pages: any[]
  meta: any[]
  article: any[]
  bannerImage: string
}>({
  pages: [],
  meta: [],
  article: [],
  bannerImage: ''
})
const scrollTop = ref<number>(0)
const percent = ref<number>(0)
const navBg = ref<string>('rgba(255,255,255,0)')
let userListObj = ref({
  count: 0,
  lists: [],
  extend: [],
  page_no: 0,
  page_size: 0,
})


// 是否联动背景图
const isLinkage = computed(() => {
  return state.pages.find((item: any) => item.name === 'banner')?.content.bg_style === 1
})
// 是否大屏banner
const isLargeScreen = computed(() => {
  return state.pages.find((item: any) => item.name === 'banner')?.content.style === 2
})

// 根页面样式
const pageStyle = computed(() => {
  const {bg_type, bg_color, bg_image} = state.meta[0]?.content ?? {}
  if (!isLinkage.value) {
    return bg_type == 1 ?
        {'background-color': bg_color} :
        {'background-image': `url(${bg_image})`}
  } else return {'background-image': `url(${state.bannerImage})`}
})

const handleBanner = (url: string) => {
  state.bannerImage = url
}

const getData = async () => {
  const data = await getIndex()
  state.pages = JSON.parse(data?.page?.data)
  state.meta = JSON.parse(data?.page?.meta)
  state.article = data.article
  uni.setNavigationBarTitle({
    title: state.meta[0].content.title
  })
}

onPageScroll((event: any) => {
  scrollTop.value = event.scrollTop
  const top = uni.upx2px(100)
  percent.value = event.scrollTop / top > 1 ? 1 : event.scrollTop / top
  navBg.value = event.scrollTop > 10 ? '#fff' : 'rgba(255,255,255,0)'
})

const navCurrent = ref(0)
const navList = ref([
  {
    name: '热门推荐',
    id: 1,
  },
  {
    name: '附近的人',
    id: 2,
  },
  {
    name: '系统匹配',
    id: 3,
  }
])

const guestsFormData = ref({
  page_no: 1, // 页码
  page_size: 10, // 每页数量
  home_class: navList.value[navCurrent.value].id, // 首页分类【0:不限；1:热门推荐；2:附近的人；3:系统匹配】
  list_calss: 0, // 专区分类【0:全部/不限;1:教师专区；2:高薪专区；3:政企专区】
})

/**
 * 获取嘉宾列表
 */
const getUserList = async () => {
  loadMore.value = 'loading'
  const {count,extend,page_no,page_size,lists} = await getGuestsList(guestsFormData.value)
  userListObj.value.count = count
  userListObj.value.extend = extend
  userListObj.value.page_no = page_no
  userListObj.value.page_size = page_size
  userListObj.value.lists.push(...lists)
}

getUserList()

const navChange = (item: any) => {
  userListObj.value = {
    count: 0,
    lists: [],
    extend: [],
    page_no: 0,
    page_size: 0,
  }
  guestsFormData.value.home_class = navList.value[item].id
  guestsFormData.value.page_no = 1
  getUserList()
}

onReachBottom(() => {
  guestsFormData.value.page_no += 1
  if (userListObj.value.lists.length < userListObj.value.count) {
    getUserList()
  } else {
    loadMore.value = 'nomore'
  }
})

onLoad(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.index {
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% auto;
  overflow: hidden;
  width: 100%;
  transition: all 1s;
  min-height: calc(100vh - env(safe-area-inset-bottom));
}

.article-title {
  &::before {
    content: '';
    width: 8rpx;
    height: 34rpx;
    display: block;
    margin-right: 10rpx;
    @apply bg-primary;
  }
}

.page-address {
  font-size: 28rpx;
  color: #3D3D3D;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: 20rpx;

  .address-icon {
    margin-right: 10rpx;
  }

  .address-text {
    max-width: 300rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

</style>
